<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-card class="login_form">
                    <h1>Vue-Admin</h1>
                    <el-form :model="loginForm" :rules="rules">
                        <el-form-item prop="username">
                            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button :loading="loading" class="login_btn" type="primary" size="default"
                                @click="loginrap()">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import userUserStroe from '../../store/modules/user'
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { ElNotification } from 'element-plus';
let useStore = userUserStroe();
let $router: any = useRouter();
//路由对象
let $routepath = useRoute();
let loginForm = reactive({
    username: "admin",
    password: "123456"
})
let loading = ref(false)

const validatorUserName = (value: any, callback: any) => {
    if (value.length === 0) {
        callback(new Error('请输入密码'))
    } else if (value.length < 6 || value.length > 16) {
        callback(new Error('密码应为6~16位的任意组合'))
    } else {
        callback()
    }
}

const validatorPassword = (value: any, callback: any) => {
    if (value.length === 0) {
        callback(new Error('请输入密码'))
    } else if (value.length < 6 || value.length > 16) {
        callback(new Error('密码应为6~16位的任意组合'))
    } else {
        callback()
    }
}

//校验规则
const rules = {
    username: [
        {
            trigger: 'change',
            validator: validatorUserName,
        },
    ],
    password: [
        {
            trigger: 'change',
            validator: validatorPassword,
        },
    ],
}

const loginrap = async () => {
    try {
        loading.value = true
        //判断登录的时候路由是否有query

        await useStore.userLogin(loginForm)
        //可以使用.then方法，如果返回一个promise错误的就不会执行
        let redirect = $routepath.query.redirect;
        console.log("redirect:", redirect)
        //编程导航
        // $router.push({ path: redirect || '/' })
        $router.push('/')

        ElNotification({
            type: "success",
            message: "登录成功"
        })
    } catch (error) {
        ElNotification({
            type: "error",
            message: "登录失败"
        })
        loading.value = false
    }
}

</script>
  
<style scoped lang="scss" >
.login_container {
    width: 100%;
    height: 100vh;
    background: url('../../assets/images/background.jpg') no-repeat;
    background-size: cover;

    .login_form {
        position: relative;
        width: 55%;
        top: 25vh;
        left: 10vw;
        padding: 10px;
        background: transparent;

        h1 {
            background: linear-gradient(to right, blue, rgb(35, 60, 70));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 40px;
            text-align: center;
            font-weight: 700;
            margin-bottom: 40px;
            margin-top: -10px;
        }

        .login_btn {
            width: 100%;
        }
    }
}

.el-card {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

:deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0;
}

.el-input {
    margin-bottom: 20px;
}
</style>